<!--
 * @Author: your name
 * @Date: 2021-06-16 14:06:39
 * @LastEditTime: 2021-06-16 17:35:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bazai_ebook\src\components\shelf\ShelfItem.vue
-->
<template>
  <div
  class="shelf-item"
  @click="onItemClick"
  :class="{'shelf-item-shadow': data.type === 1 || data.type === 2}">
    <component :is="item" :data="data"></component>
    <div
    class="shelf-item-select-icon"
    :class="{'icon-selected': data.selected}"
    v-show="isEditMode && data.type === 1"></div>
  </div>
</template>

<script>
import { storeShelfMixin } from '@/mixins/mixin'
import { gotoStoreHome } from '@/utils/store'
export default {
  mixins: [storeShelfMixin],
  name: 'ShelfItem',
  data () {
    return {
      book: 'ShelfItemBook',
      add: 'ShelfItemAdd',
      category: 'ShelfItemCategory'
    }
  },
  props: {
    data: Object
  },
  computed: {
    item () {
      return this.data.type === 1 ? this.book : (this.data.type === 2 ? this.category : this.add)
    }
  },
  methods: {
    onItemClick () {
      if (this.isEditMode) {
        /* eslint-disable */
        this.data.selected = !this.data.selected
        if (this.data.selected) {
          this.shelfSelected.pushWithoutDuplicate(this.data)
        } else {
          this.setShelfSelected(this.shelfSelected.filter(item => item.id !== this.data.id))
        }
      } else {
        if (this.data.type === 1) {
          this.showBookDetail(this.data)
        } else if (this.data.type === 2) {} else {
          gotoStoreHome(this)
        }
      }
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .shelf-item {
    position: relative;
    width: 100%;
    height: 100%;
    &.shelf-item-shadow {
      box-shadow: px2rem(2) px2rem(2) px2rem(6) px2rem(2) rgba(200, 200, 200, .3);
    }
    .shelf-item-comp {
      opacity: 1;
      &.is-edit {
        opacity: .5;
      }
    }
    .icon-selected {
      position: absolute;
      bottom: px2rem(2);
      right: px2rem(2);
      font-size: px2rem(18);
      color: rgba(0, 0, 0, .4);
      &.is-selected {
        color: $color-blue;
      }
    }
  }
</style>
